<template>
    <div class="content">



        <el-button type="primary" style="width: 120px; height: 30px; margin-left: 6px; margin-top: 8px;"
            @click="clickAdd">添加策略</el-button>

        <div>
            <el-table border ref="multipleTable" :data="maxGives" tooltip-effect="dark"
                style="width: 100%;margin-top: 20px; margin-left: 6px;" height="">
                <!-- <el-table-column type="selection" width="55" align="center">
                </el-table-column> -->

                <el-table-column label="策略名称" prop="name" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="说明" prop="note" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="状态" show-overflow-tooltip align="center">
                    <template scope="scope">{{ scope.row.status == 0 ? '关闭' : '开启' }}</template>
                </el-table-column>
                <el-table-column label="生效时间" prop="start_time" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="失效时间" prop="end_time" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="操作员" prop="operator" show-overflow-tooltip align="center"></el-table-column>


                <el-table-column fixed="right" label="编辑" align="center" width="200px">
                    <template slot-scope="scope">
                        <el-button @click="bianJi(scope.row)" type="text" size="mini">编辑</el-button>
                        <el-button type="text" size="mini" style="color: red;" @click="delete (scope.row)">删除</el-button>
                    </template>

                </el-table-column>
            </el-table>

        </div>


        <!-- 审核详情弹出框 -->
        <el-dialog title="添加模板" :visible.sync="addDialogVisible" width="40%">

            <div style="height: 800px; overflow: auto; display: flex; flex-direction: column; ">







                <div style="display: flex; align-items: center; ">
                    <div style="width: 100px; text-align: right;  margin-left: 20px;">*策略名称：</div>
                    <el-input placeholder="请输入策略名称" v-model="currentRow.name"
                        style="width: 320px; margin-left: 30px;"></el-input>
                </div>

                <div style="display: flex; margin-top: 20px; align-items: center;  margin-left: 20px;">
                    <div style="width: 100px; text-align: right;">*策略说明：</div>
                    <el-input v-model="currentRow.note" placeholder="请输入策略说明" style="margin-left: 30px; width: 320px;"
                        type="text" :autosize="autosize"></el-input>

                </div>

                <div style="display: flex; margin-top: 20px; align-items: center; margin-left: 20px; ">
                    <div style="width: 100px; text-align: right;">*生效时间：</div>

                    <el-date-picker v-model="dataValue" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期"  @change="dataChange"
                        value-format="yyyy-MM-dd HH:mm:ss" style="width: 320px; margin-left: 30px;">
                    </el-date-picker>

                </div>


                <div style="display: flex; margin-top: 20px; align-items: center; margin-left: 20px;">
                    <div style="width: 100px; text-align: right;">*状态：</div>
                    <el-radio-group v-model="currentRow.status" style="display: flex; margin-left: 30px;">
                        <el-radio :label="1" class="test-label">开启</el-radio>
                        <el-radio :label="0" class="test-label">关闭</el-radio>
                    </el-radio-group>
                </div>

                <div style="display: flex; margin-top: 20px; align-items: center; margin-left: 20px; ">
                    <div style="width: 100px; text-align: right;">策略条件：</div>
                    <div style="margin-right: 10px;margin-left: 30px;"> 金额>=</div><el-input placeholder="输入金额"
                        style="width: 158px; " type="number" step="0.01" v-model="currentRow.rule_money" />
                    <div style="margin-left: 7px;">元</div>
                </div>








                <div style="display: flex; margin-top: 30px;">


                    <div style="display: flex; flex-direction: column; flex: 1;">
                        <div>满赠活动商品列表</div>

                        <el-table ref="multipleTableClinicRoom" @selection-change="handleSelectionChange" border
                            :data="activityGoods" tooltip-effect="dark" style="margin-top: 10px;">
                            <el-table-column type="selection" width="55" align="center"></el-table-column>
                            <el-table-column label="商品名称" prop="name" show-overflow-tooltip
                                align="center"></el-table-column>
                            <el-table-column label="价格" prop="price" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column label="库存" prop="inventory" show-overflow-tooltip
                                align="center"></el-table-column>

                        </el-table>


                    </div>

                    <div
                        style="width: 15px; height: 15px; background-color: #eee; text-align: center; align-self: center; margin-right: 3px; margin-left: 3px;">
                        >
                    </div>


                    <div style="display: flex; flex-direction: column; flex: 1;">
                        <div>已选商品</div>

                        <el-table border ref="multipleTable2" :data="selectedGoods" tooltip-effect="dark"
                            style="margin-top: 10px;">
                            <el-table-column label="商品名称" prop="name" show-overflow-tooltip
                                align="center"></el-table-column>
                            <el-table-column label="价格" prop="price" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column label="数量" show-overflow-tooltip align="center">
                                <template slot-scope="scope">
                                    <el-input @input="changeInput" v-model="scope.row.number" type="number"
                                        placeholder="请输入数量"> </el-input>
                                </template>
                            </el-table-column>


                        </el-table>


                    </div>



                </div>






                <div style="position: absolute; bottom: 20px; align-self: center;">
                    <el-button type="primary" @click="saveClick" v-if="isLook">保存</el-button>
                    <el-button type="primary" @click="bianJiClick" v-else>修改</el-button>
                </div>

            </div>
        </el-dialog>


    </div>
</template>

<script>
import { get, post, put } from '@/utils/request'
import { url } from '@/utils/url'
export default {
    name: '',
    data() {
        return {
            notes: '',
            dataValue: [],
            isLook: true,
            addDialogVisible: false,
            currentRow: {
                id: '',
                name: '',
                note: "",
                status: '',
                upDateTime: '',
                operator: '',
                start_time: '',
                end_time: '',
                rule_money: '',
                gift_goods: [],
            },
            maxGives: [
                {
                    name: '无敌双十一满减活动',
                    note: "活动时间：本次满减活动将于2023年5月1日至2023年5月31日进行。活动对象：本次活动仅适用于所有在本商城注册并符合活动参与条件的用户。活动范围：本次满减活动适用于本商城内所有符合条件的商品。活动规则：a. 用户在活动期间购买符合条件的商品，单笔订单总金额（以订单结算金额为准）达到特定金额，即可享受相应的满减优惠。b. 满减优惠不可与其他优惠活动同时使用，但可与商城积分、优惠券等优惠方式叠加使用。6. 活动解释权：本活动最终解释权归本商城所有。如有任何疑问或需要帮助，请联系我们的客服团队。感谢您的支持与参与",
                    status: '正常',
                    upDateTime: '2023-11/28 18:05',
                    operator: '快递员01',
                    start_time: '2023-10-01',
                    end_time: '2023-11-11',

                }
            ],

            activityGoods: [
                {
                    goodsName: "大都糖果瓶装豆粉",
                    price: 2.85,
                    inventory: 100,
                    number: 0
                },
                {
                    goodsName: "大苹果",
                    price: 2.85,
                    inventory: 100,
                    number: 0
                },
                {
                    goodsName: "大山楂",
                    price: 2.85,
                    inventory: 100,
                    number: 0
                }
            ],

            selectedGoods: [
            ],

            activityStatus: 1,

            jianMoney: '',
            remark: ''


        }
    },
    components: {

    },
    computed: {

    },
    mounted() {
        this.getMaxGiveMessage()
    },
    methods: {
        changeInput() {
            this.$forceUpdate();
        },


        //点击编辑保存
        bianJiClick() {
            console.log("当前选中selectedGoods：" + JSON.stringify(this.selectedGoods))
            let giftGoods = this.selectedGoods.map(good => ({
                id: good.id,
                cover: good.cover,
                number: good.number,
                name:good.name
            }))
            console.log("当前giftGoods：" + JSON.stringify(giftGoods))

            put(url.fullMinus, {
                id: this.currentRow.id,
                type: 1,
                name: this.currentRow.name,
                rule_money: this.currentRow.rule_money,
                start_time: this.currentRow.start_time,
                end_time: this.currentRow.end_time,
                status: this.currentRow.status,
                note: this.currentRow.note,
                gift_goods: giftGoods
            }).then(res => {
                console.log(JSON.stringify(res))
                this.getMaxGiveMessage()
                this.addDialogVisible = false
            }).catch(error => {
                console.error(error);
            })
        },

        //点击新增保存
        saveClick() {
            console.log("当前选中selectedGoods：" + JSON.stringify(this.selectedGoods))
            let giftGoods = this.selectedGoods.map(good => ({
                id: good.id,
                cover: good.cover,
                number: good.number,
                name:good.name
            }))
            console.log("当前giftGoods：" + JSON.stringify(giftGoods))

            post(url.fullMinus, {
                type: 1,
                name: this.currentRow.name,
                rule_money: this.currentRow.rule_money,
                start_time: this.currentRow.start_time,
                end_time: this.currentRow.end_time,
                status: this.currentRow.status,
                note: this.currentRow.note,
                gift_goods: giftGoods
            }).then(res => {
                console.log(JSON.stringify(res))
                this.getMaxGiveMessage()
                this.addDialogVisible = false
            }).catch(error => {
                console.error(error);
            })
        },




        getGoodsData() {
            get(url.goods, {
                page: 1,
                per_page: 1000,
                type: 4,
                name: '',
                category_one: "",
                category_two: "",
            }).then((response) => {
                //这个地方需要 先修改值 在赋值不然就会出现输入框无法修改的bug
                let copys = response.data.data;
                copys.forEach(giveGood => {
                    giveGood.number = 1
                })
                this.activityGoods = copys;
                if (!this.isLook) {
                    console.log('当前giftGods==>' + JSON.stringify(this.currentRow.gift_goods))
                    let commonGoods = this.activityGoods.filter(good => this.currentRow.gift_goods.some(gift => gift.id == good.id))
                    // let commonGoods =this.activityGoods.map(good=>{
                    //     const gift =this.currentRow.gift_goods.find(gift => gift.id ==good.id);
                    //     if(gift){
                    //         return {...good, number:gift.number}
                    //     }else {
                    //     }
                    // })
                    commonGoods = commonGoods.filter(item => item !== null)
                   
                    for (let i = 0; i < this.currentRow.gift_goods.length; i++) {
                        commonGoods[i].number = this.currentRow.gift_goods[i].number;
                    }
                    console.log('commonGoods==????操操擦操>' + JSON.stringify(commonGoods))
                    //选中的列表数据加载
                    this.$nextTick(() => {
                        // 注意：toggleRowSelection(item, true) 中 item 必须是行数据
                        this.selectedGoods = commonGoods
                        this.selectedGoods.forEach(row => {
                            this.$refs.multipleTableClinicRoom.toggleRowSelection(row)
                        })

                    })



                }


            }).catch((error) => {
                console.error(error); // 在这里处理错误
            });
        },

        //点击编辑
        bianJi(row) {
            this.isLook = false;
            get(url.fullMinus, {
                id: row.id
            }).then(res => {

                this.currentRow = res.data
                this.dataValue[0] = res.data.start_time
                this.dataValue[1] = res.data.end_time
                let gift_goods = res.data.gift_goods
                this.getGoodsData()
                this.addDialogVisible = true

            }).catch(error => {
                console.error(error);
            })
        },

        //获取列表数据
        getMaxGiveMessage() {
            get(url.fullMinuses, {
                page: this.page,
                per_page: 20,
                type: 1
            }).then(res => {
                this.maxGives = res.data.data
            }).catch(error => {
                console.error(url.fullMinuses + error);
            })
        },

        //点击添加活动
        clickAdd() {
            this.getGoodsData()
            this.isLook = true
            this.currentRow = {}
            this.dataValue = []
            this.addDialogVisible = !this.addDialogVisible
        },

        handleSelectionChange(rows) {
            this.selectedGoods = rows

            console.log("handleSelectionChange当前选中：" + JSON.stringify(this.selectedGoods))
        },


        //日期更换事件
        dataChange(data) {
            this.currentRow.start_time = data[0],
                this.currentRow.end_time = data[1]
            console.log(JSON.stringify(data[0]))
            console.log(JSON.stringify(this.dataValue))
        },



    },
}
</script>

<style scoped>
.content {
    overflow: auto;
    background: white;
    flex-direction: column;
    width: 100%;
    border-radius: 5px;
    border: solid 6px #F5F5F5;



}
</style>
